<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<link rel="stylesheet" href="css/public.css" />
		<link rel="stylesheet" href="css/rank.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="position: static;background: rgb(67,67,67);">
			<h1 class="mui-title" style="color:white;">智障题库</h1>
		</header>
		<mbody>
			<h2>排行榜</h2>
			<div class="rank">
				<div class="main">
					<div class="rank_uid">ID</div>
					<div class="rank_img">头像</div>
					<div class="rank_name">名字</div>
					<div class="rank_mark">分数</div>
					<div class="rank_number">排名</div>
				</div>
				<br /><br />
				<div class="rank_main">
					<div class="rank_uid">10000</div>
					<div class="rank_img">
						<img src="http://q1.qlogo.cn/g?b=qq&nk=153669225&s=100" alt="" />
					</div>
					<div class="rank_name">路人甲</div>
					<div class="rank_mark">2000</div>
					<div class="rank_number">1</div>
				</div>
				<div class="rank_main">
					<div class="rank_uid">10000</div>
					<div class="rank_img">
						<img src="http://q1.qlogo.cn/g?b=qq&nk=153669225&s=100" alt="" />
					</div>
					<div class="rank_name">路人甲</div>
					<div class="rank_mark">2000</div>
					<div class="rank_number">1</div>
				</div>
				<div class="rank_main">
					<div class="rank_uid">10000</div>
					<div class="rank_img">
						<img src="http://q1.qlogo.cn/g?b=qq&nk=153669225&s=100" alt="" />
					</div>
					<div class="rank_name">路人甲</div>
					<div class="rank_mark">2000</div>
					<div class="rank_number">1</div>
				</div>
				<div class="rank_main">
					<div class="rank_uid">10000</div>
					<div class="rank_img">
						<img src="http://q1.qlogo.cn/g?b=qq&nk=153669225&s=100" alt="" />
					</div>
					<div class="rank_name">路人甲</div>
					<div class="rank_mark">2000</div>
					<div class="rank_number">1</div>
				</div>
				<div class="rank_main">
					<div class="rank_uid">10000</div>
					<div class="rank_img">
						<img src="http://q1.qlogo.cn/g?b=qq&nk=153669225&s=100" alt="" />
					</div>
					<div class="rank_name">路人甲</div>
					<div class="rank_mark">2000</div>
					<div class="rank_number">1</div>
				</div>
				<div class="rank_main">
					<div class="rank_uid">10000</div>
					<div class="rank_img">
						<img src="http://q1.qlogo.cn/g?b=qq&nk=153669225&s=100" alt="" />
					</div>
					<div class="rank_name">路人甲</div>
					<div class="rank_mark">2000</div>
					<div class="rank_number">1</div>
				</div>
				<div class="rank_main">
					<div class="rank_uid">10000</div>
					<div class="rank_img">
						<img src="http://q1.qlogo.cn/g?b=qq&nk=153669225&s=100" alt="" />
					</div>
					<div class="rank_name">路人甲</div>
					<div class="rank_mark">2000</div>
					<div class="rank_number">1</div>
				</div>
				<div class="rank_main">
					<div class="rank_uid">10000</div>
					<div class="rank_img">
						<img src="http://q1.qlogo.cn/g?b=qq&nk=153669225&s=100" alt="" />
					</div>
					<div class="rank_name">路人甲</div>
					<div class="rank_mark">2000</div>
					<div class="rank_number">1</div>
				</div>
				<div class="rank_main">
					<div class="rank_uid">10000</div>
					<div class="rank_img">
						<img src="http://q1.qlogo.cn/g?b=qq&nk=153669225&s=100" alt="" />
					</div>
					<div class="rank_name">路人甲</div>
					<div class="rank_mark">2000</div>
					<div class="rank_number">1</div>
				</div>		
				<div class="rank_main">
					<div class="rank_uid">10000</div>
					<div class="rank_img">
						<img src="http://q1.qlogo.cn/g?b=qq&nk=153669225&s=100" alt="" />
					</div>
					<div class="rank_name">路人甲</div>
					<div class="rank_mark">2000</div>
					<div class="rank_number">1</div>
				</div>				
			</div>				
			</div>
			<div class="rank_my">
				<div class="my">
					<img src="http://q1.qlogo.cn/g?b=qq&nk=714396705&s=100" alt="" />
				</div>
				<div class="rankmy">
					<i>
						分数：<span>1999</span>
					</i>
					<i>
						排名：<span>11</span>
					</i>	
				</div>
			</div>
		</mbody>
		<mfooter>
			<div class="menu">
				<button onclick="window.open('./index.html')"><i class="mui-icon mui-icon-home"></i></button>
				<button><i class="mui-icon mui-icon-bars"></i></button>
				<button onclick="window.open('./user.html')"><i class="mui-icon mui-icon-person"></i></button>
			</div>
		</mfooter>
	</body>
	<script type="text/javascript">
		var rank = document.getElementsByClassName('rank_number');
		for(var i = 1;i < rank.length;i ++){
			rank[i].innerText = "#" + i;
		}
		
		var bac = document.getElementsByClassName('rank_main');
		for(var i = 0;i < bac.length;i += 1){
			if(i%2 != 0){
				bac[i].style.background = 'rgb(233,233,233)';
			}else{
				bac[i].style.background = 'rgb(244,244,244)';
			}
		}
	</script>
</html>